<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客案例</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.3.5/css/bootstrap.css"/>
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        /*.navbar {*/
        /*    border-radius: 12px;*/
        /*}*/

        .more .more-item {
            margin-right: 20px;
        }
    </style>
</head>
<body>

<div class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">博 客</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">企业风采 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">人工服务</a></li>
                <li><a href="#">给点建议</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多业务 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">企业合作</a></li>
                        <li><a href="#">个人业务</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">
                    <i class="fa fa-search" aria-hidden="true"></i> 搜索
                </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li>
                    <a data-toggle="modal" data-target="#myModal">
                        ~按我~
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">个人信息 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>

<!--<div class="container">-->
<div class="container-fluid clearfix">
    <div class="col-sm-9">

        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;"
                         src=""
                         data-holder-rendered="true">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">
                    热度
                    <span style="color: #b6b601">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star-half" aria-hidden="true"></i>
                    </span>
                </h4>
                <p>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras
                    purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate
                    fringilla. Donec lacinia congue felis in faucibus.
                </p>
                <div class="more clearfix"><!--一定记得加clearfix-->
                    <span class="more-item">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                        2023年4月26日
                    </span>
                    <span class="more-item">
                    <i class="fa fa-clock-o" aria-hidden="true"></i>
                        20:12:14
                    </span>
                    <span class="more-item">
                    <i class="fa fa-user" aria-hidden="true"></i>
                        不知名作者
                    </span>
                    <span class="more-item" style="float: right;">
                    <i class="fa fa-commenting" aria-hidden="true"></i>
                        123321条
                    </span>

                </div>

            </div>
        </div>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;"
                         src=""
                         data-holder-rendered="true">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;"
                         src=""
                         data-holder-rendered="true">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
        </div>

        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>

    </div>


    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-fire" aria-hidden="true" style="color: red;font-size: 18px"></i> 最新推荐
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">primary</div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">success</div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <!--还有info等类-->
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">信息处理</h4>
            </div>
            <div class="modal-body">
                说点什么吧~
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="static/JavaScript/jquery-3.6.4.min.js"></script>
<script src="static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>

</body>
</html>